import React from 'react'
import {Menu,Button,Dropdown,Input,Row,Col} from 'antd';
import { DownOutlined, UserOutlined } from '@ant-design/icons';
import axios from 'axios'
import './css/ProductsList.css'
import { Table } from 'antd';
import {Link,withRouter} from 'react-router-dom'
const {Search} = Input

const pageNation = {
    position:['bottomRight'],
    pageSize:10,
    size:'small',
    total:7,
    showQuickJumper:true,
    backgroundColor:'#4BD0B6',
}

class ProductsList extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            selectedRowKeys: [],
            loading: false,
            data:[],
            goodsType:[],
            goodsState:[
                {key:1,goodsStateName:'全部状态'},
                {key:2,goodsStateName:'已上架'},
                {key:3,goodsStateName:'已下架'},
            ],
            typeSelectValue:'全部分类',
            stateSelectValue:'全部状态'
        }
        this.menu2 = (
            <Menu>
                <Menu.Item key="1">
                    <Link to={{pathname:'ImportProDetails',state:'1'}}>
                        <UserOutlined/>
                        导入商品基础信息
                    </Link>
                </Menu.Item>
                <Menu.Item key="2">
                    <Link to={{pathname:'ImportProDetails',state:'2'}}>
                        <UserOutlined />
                        导入商品订货价
                    </Link>
                </Menu.Item>
                <Menu.Item key="3">
                    <Link to={{pathname:'ImportProDetails',state:'3'}}>
                        <UserOutlined />
                        导入商品客户定价
                    </Link>
                </Menu.Item>
                <Menu.Item key="4">
                    <Link to={{pathname:'ImportProDetails',state:'4'}}>
                        <UserOutlined />
                        导入商品图片
                    </Link>
                </Menu.Item>
            </Menu>
        );
    }

    toDetalis(text){
        let data = this.state.data
        data.map(item=>{
            if(item.key===text||item.name===text){
                this.props.history.push({pathname:'/homepage/productsdetails',query:item})
                return item
            }
        })
    }
    columns = [
        {
            title: '主图',
            dataIndex: 'goodsImgId',
            align:'center',
            render:text=> <img src={text} alt=""/>
        },
        {
            title: '商品编码',
            dataIndex: 'key',
            sorter: {
                compare: (a, b) => a.key - b.key,
                multiple: 4,
            },
            align:'center',
            render:text=> <span onClick={()=>this.toDetalis(text)}>{text}</span>
        },
        {
            title: '商品名',
            dataIndex: 'goodsName',
            align:'center',
            render:text=> <span onClick={()=>this.toDetalis(text)}>{text}</span>
        },
        {
            title: '商品规格',
            dataIndex: 'goodsSpecifications',
            align:'center'
        },
        {
            title: '单位',
            dataIndex: 'goodsUnit',
            align:'center'
        },
        {
            title: '市场价',
            dataIndex: 'goodsMarketPrice',
            sorter: {
                compare: (a, b) => a.key - b.key,
                multiple: 4,
            },
            align:'center'
        },
        {
            title: '参考成本价',
            dataIndex: 'referenceCostPrice',
            sorter: {
                compare: (a, b) => a.key - b.key,
                multiple: 4,
            },
            align:'center'
        },
        {
            title: '库存数量',
            dataIndex: 'stock_number',
            sorter: {
                compare: (a, b) => a.key - b.key,
                multiple: 4,
            },
            align:'center'
        },
        {
            title: '预购',
            dataIndex: 'pre_order_number',
            sorter: {
                compare: (a, b) => a.key - b.key,
                multiple: 4,
            },
            align:'center'
        },
        {
            title: '库存成本',
            dataIndex: 'inventoryCost',
            sorter: {
                compare: (a, b) => a.key - b.key,
                multiple: 4,
            },
            align:'center'
        },
        {
            title: '状态',
            dataIndex: 'goodsStatus',
            align:'center'
        },
    ];

    typeSelected=(name)=>{
        this.setState({
            typeSelectValue:name
        })
        axios({
            url:'/api/goods/selectGoodsByFirstSelectValue',
            data:{selectValue:name,currentPage:1},
            method:'post'
        }).then(res=>{
            let data = res.data.data.filter((item)=>{
                item.key = item.goodsId
                delete item.goodsId
                return item
            })
            this.setState({
                data:data
            })
        })
    }

    stateSelected=(state)=>{
        this.setState({
            stateSelectValue:state
        })
        axios({
            url:'/api/goods/selectGoodsBySecondSelectValue',
            data:{selectValue:state,currentPage:1},
            method:'post'
        }).then(res=>{
            let data = res.data.data.filter((item)=>{
                item.key = item.goodsId
                delete item.goodsId
                return item
            })
            this.setState({
                data:data
            })
        })
    }

    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
    };
    render() {
        let data = this.state.data;
        let columns = this.columns;
        const { loading, selectedRowKeys } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        const hasSelected = selectedRowKeys.length > 0;
        return (
            <div id='headContent'>
                <Row id='orderListHead'>
                    <Col id='leftCol' span={12}>
                        <Dropdown overlay={(<Menu>
                            {this.state.goodsType.map((item,index)=>{
                                return <Menu.Item onClick={()=>this.typeSelected(item.goodsTypeName)} key={index}>{item.goodsTypeName}</Menu.Item>
                            })}
                        </Menu>)}>
                            <Button>
                                {this.state.typeSelectValue} <DownOutlined/>
                            </Button>
                        </Dropdown>
                        <Dropdown overlay={(<Menu>
                            {this.state.goodsState.map((item,index)=>{
                                return <Menu.Item onClick={()=>this.stateSelected(item.goodsStateName)} key={index}>{item.goodsStateName}</Menu.Item>
                            })}
                        </Menu>)}>
                            <Button id='mySelect'>
                                {this.state.stateSelectValue} <DownOutlined />
                            </Button>
                        </Dropdown>
                        <Search id='myInput'  placeholder="请输入..." />
                    </Col>
                    <Col id='rightCol' span={12}>
                        <Dropdown overlay={this.menu}>
                            <Button>
                                导出 <DownOutlined />
                            </Button>
                        </Dropdown>
                        <Dropdown overlay={this.menu2}>
                            <Button id='mySelect'>
                                导入 <DownOutlined />
                            </Button>
                        </Dropdown>
                        <Link to="/homepage/addproducts">
                        <Button id='myBtn' type="primary">新增</Button>
                        </Link>
                    </Col>
                </Row>
                <Row>
                    <Table id='myTable' pagination={pageNation} rowSelection={rowSelection} columns={columns} dataSource={data} />
                </Row>
            </div>
        );
    }
    componentDidMount() {
        axios({
            url:'/api/goods/selectCurrentPageGoods',
            method:'post',
            data:{currentPage:1,perSize:7}
        }).then(res=>{
            let data = res.data.data.filter((item)=>{
                item.key = item.goodsId
                delete item.goodsId
                return item
            })
            this.setState({
                data:data
            })
        })
        axios({
            url:'/api/goods/selectGoodsType',
            method:'post',
        }).then(res=>{
            let data = res.data.data.filter((item)=>{
                item.key = item.goodsTypeId
                delete item.goodsTypeId
                return item
            })
            let allType = {key:1,goodsTypeName:'全部分类'}
            data.unshift(allType)
            this.setState({
                goodsType:data
            })
        })
    }
}

export default withRouter(ProductsList)